function convertAndMergeAttrsAndListeners(attrs, listeners) {
    // 辅助函数：将kebab-case转换为camelCase
    function toCamelCase(str) {
        return str.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
    }

    // 转换并合并attrs和listeners
    const result = {};

    // 处理attrs
    for (const key in attrs) {
        if (Object.prototype.hasOwnProperty.call(attrs, key)) {
            const newKey = toCamelCase(key);
            result[newKey] = attrs[key];
        }
    }

    // 处理listeners
    for (const key in listeners) {
        if (Object.prototype.hasOwnProperty.call(listeners, key)) {
            const newKey = 'on' + toCamelCase(key.charAt(0).toUpperCase() + key.slice(1));
            result[newKey] = listeners[key];
        }
    }

    return result;
}



function createReusableTemplate() {
    let render
    const DefineTemplate = {
        name: 'DefineTemplate',
        render(h) {
            // 将当前组件的内容注册到模板存储中
            render = this.$slots.default || this.$scopedSlots.default;
        }
    };

    const ReuseTemplate = {
        name: 'ReuseTemplate',
        render(h) {
            // 从模板存储中获取模板并渲染
            if (render) {
                const result = convertAndMergeAttrsAndListeners(this.$attrs,this.$listeners)
                const vnodes = render(result)
                if (vnodes.length > 1) {
                    throw new Error('受vue2的限制，模板中也只能有一个根节点')
                }
                return vnodes;
            } else {
                console.warn('规定DefineTemplate注册模板必须在DefineTemplate前面')
            }
        }
    };

    return {DefineTemplate, ReuseTemplate};
}


/**
 <template>
 <PageContent>
 <!--  定义一个模板  -->
 <DefineTemplate v-slot="{msg,msgTest,msgTTest,onClick}">
 <div>
 <div>6</div>
 <div>msg{{msg}}</div>
 <div>msgTest{{msgTest}}</div>
 <div>msgTTest{{msgTTest}}</div>
 <van-button
 @click="onClick"
 >anniu</van-button>
 <div
 >5</div>
 <van-button
 @click="test"
 >shabi</van-button>
 </div>
 </DefineTemplate>

 <!--  使用模板  -->
 <ReuseTemplate :msg="msg"
 :msg-test="msg"
 :msgTTest="msg"
 @click="test"
 ></ReuseTemplate>
 <ReuseTemplate :msg="msg2"
 :msg-test="msg2"
 :msgTTest="msg2"
 @click="test2"
 ></ReuseTemplate>

 <!--  定义另外一个模板  -->
 <DefineTemplate1 v-slot="{msg,msgTest,msgTTest,onClick}">
 <div>
 <div>6</div>
 <div>msg{{msg}}</div>
 <div>msgTest{{msgTest}}</div>
 <div>msgTTest{{msgTTest}}</div>
 <van-button
 @click="onClick"
 >anniu</van-button>
 <div
 >5</div>
 <van-button
 @click="test1"
 >shabi</van-button>
 </div>
 </DefineTemplate1>
 <!--  使用另外一个模板  -->
 <ReuseTemplate1 :msg="msg1"
 :msg-test="msg1"
 :msgTTest="msg1"
 @click="test1"
 ></ReuseTemplate1>

 </PageContent>
 </template>

 <script>
 import createReusableTemplate from "../../../../vueCommon/utils/createReusableTemplate.js";

 // 返回一组组件，可以多个
 const reusableTemplate = createReusableTemplate();
 const reusableTemplate1 = createReusableTemplate();
 export default {
  name: "ComtestIndex",
  components: {
    DefineTemplate: reusableTemplate.DefineTemplate,
    ReuseTemplate: reusableTemplate.ReuseTemplate,
    DefineTemplate1: reusableTemplate1.DefineTemplate,
    ReuseTemplate1: reusableTemplate1.ReuseTemplate,
  },
  data() {
    return {
      msg: 6,
      msg1: 66,
      msg2: 266,
    }
  },
  methods: {
    test() {
      console.log(66666)
      this.msg++;
    },
    test1() {
      console.log(166666)
      this.msg1++;
    },
    test2() {
      console.log(2166666)
      this.msg2++;
    },
  }
}
 </script>

 <style lang="less" scoped>

 </style>
 */
export default createReusableTemplate
